<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>学生信息管理系统</title>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <script src="https://unpkg.com/axios/dist/axios.min.js"></script>

    <style>
        th {
            font-weight: bold;
            text-align: center;
            background-color: #cc9;
            height: 40px;
        }

        td {
            height: 40px;
        }

        tr {
            height: 80px;
        }

        #container {
            /* background-color: red; */
        }

        #d2 {
            /* background-color: green; */
            width: 70%;
            text-align: left;
            font-size: x-large;
            font-weight: 800;
        }
    </style>

</head>

<body>
<br>
<div id="container" align="center">

    <input type="button" value="添加" @click.prevent="addItem()">
    <br><br>
    <table border="1px" width="70%" cellspacing="0">
        <tr>
            <th>序号</th>
            <th>学号</th>
            <th>姓名</th>
            <th>性别</th>
            <th>出生年月</th>
<!--            <th>操作</th>-->
        </tr>
        <tr v-for="(item , index) in items" align="center">
            <td>{{index + 1}}</td>
            <td>{{item.stuId}}</td>
            <td>{{item.name}}</td>
            <td>{{item.sex}}</td>
            <td>{{item.birthday}}</td>
<!--            <td>-->
<!--                <span>&nbsp;</span>-->
<!--                <input type="button" value="移除" @click.prevent="deleteItem(index)">-->
<!--            </td>-->
        </tr>
    </table>
</div>
</body>

<script>
    var app = new Vue({
        el: "#container",
        data: {
            keyword: "",
            items: [],
        },
        mounted() {
            this.getAll();
        },
        methods: {
            getAll: function () {
                var t = this;
                axios.get("/web_stu_info/main/queryAll.do").then(function (response) {
                    console.log(response.data);
                    // var json = JSON.stringify(response.data);
                    // var obj = JSON.parse(json);
                    // console.log("obj = " + obj);
                    // t.items = obj;
                    t.items = response.data;
                }, function (error) {
                })
            },
            addItem: function () {
                axios.get("/web_stu_info/add.check").then(function (response) {
                    console.log(response.data);
                    var data = response.data;
                    if (data.flag > 0)
                        self.location = data.target;
                    else {
                        if (confirm("请先登录"))
                            self.location = data.target;
                    }
            }, function(error) {

            })
    },
    },
    })
    ;

</script>

</html>